<template>
  <!-- dialog弹窗 -->
  <el-dialog title="添加菜单" :model-value="modelValue" @close="onClose">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      label-width="100px"
      class="demo-ruleForm"
      label-position="left"
    >
      <el-form-item label="菜单名称" prop="name" label-width="100px">
        <el-input style="width:270px" v-model="ruleForm.name" placeholder="请填写菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="菜单级别" prop="rank">
        <el-select 
          style="width:270px" 
          @change="onSelectMenuRank" 
          v-model="ruleForm.rank" 
          placeholder="请选择菜单级别"
        >
          <el-option label="一级" :value="1" />
          <el-option label="二级" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="父级菜单" prop="parent">
        <el-select 
          :disabled="isParentMenu" 
          style="width:270px" 
          @change="onSelectParent" 
          v-model="ruleForm.parent" 
          placeholder="当菜单级别为二级时可选"
        >
          <el-option 
            v-for="item in parentRoutes" 
            :key="item.path" 
            :label="item.meta.title" 
            :value="item.path" 
          />
        </el-select>
      </el-form-item>
      <el-form-item label="路径" prop="path">
        <el-input 
          placeholder="请配置跳转路径，如：/shopMallList" 
          style="width:270px" 
          v-model="ruleForm.path" 
        />
      </el-form-item>
      <el-form-item label="说明" prop="desc">
        <el-input style="width:270px" v-model="ruleForm.desc" placeholder="关于此菜单的描述" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onCreateMenu">立即创建</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from 'vue'
import {ElMessage} from 'element-plus'

// eslint-disable-next-line
const emits = defineEmits(['update:modelValue'])
// eslint-disable-next-line
const props = defineProps({
  menus: {
    type: Array,
    default: () => []
  },
  parentRoutes: {
    type: Array,
    default: () => []
  },
  formData: {
    type: Object,
  },
  modelValue: {
    type: Boolean,
    default: false
  },
})

const isParentMenu = ref(false)
const isRequiredPath = ref(false)
const ruleForm = ref({
  name: '',
  rank: '',
  path: '',
  sort: '',
  desc: '',
  parent: '',
})

watch(() => props.modelValue, () => {
  const p = props
  const data = p.formData
  ruleForm.value = {
    name: data.name,
    path: data.path,
    rank: !data.hasChildren ? 1 : 2,
    sort: data.index,
    isEnable: data.isEnable,
    parent: data.hasChildren ? p.parentRoutes.filter(item => item.path === data.path)[0].path : null
  }
  isParentMenu.value = !data.hasChildren ? true : false
})

const rules = {
  name: [{required: true, message: '请选择菜单名称'}],
  rank: [{required: true, message: '请选择菜单级别'}],
  path: [{required: true, message: '请配置跳转路径'}],
  parent: [{required: true, message: '请选择父级菜单'}]
}

function onClose() {
  emits('update:modelValue', false)
}
function onCreateMenu() {
  const menusVal = props.menus
  const ruleFormVal = ruleForm.value
  let tRoutesArr = menusVal
  // 模拟添加一级菜单
  if (isParentMenu.value) {
    let result = {
      path: ruleFormVal.path, 
      name: ruleFormVal.name, 
      title: ruleFormVal.name,
      hasChildren: false,
      index: menusVal.length + 1,
      isEnable: false,
    }
    tRoutesArr.push(result)
  } else {
    console.log(isParentMenu.value)
    tRoutesArr.push({
      hasChildren: true,
      children: [],
      index: menusVal.length + 1,
      path: ruleFormVal.parent,
      isEnable: false,
      component: `${ruleFormVal.parent}${ruleFormVal.path}`,
      title: ruleFormVal.name,
    })
  }
  if (!ruleFormVal.path.startsWith('/')) {
    ElMessage.warning('路径必须以 / 开头')
    return
  }
  ElMessage.success('创建成功')
  ruleForm.value = {name: '', rank: '', path: '', sort: '', desc: '',  parent: ''}
  onClose()
}
// 选择菜单级别
function onSelectMenuRank(e) {
  e === 2 ? isParentMenu.value = false : isParentMenu.value = true
  e === 2 ? isRequiredPath.value = false : isRequiredPath.value = true
}
// 选择父级菜单
function onSelectParent(e) {
  console.log(e)
}
</script>
